<template>
	<div class="Goodsparticulars">
		<div class="tabs">
			<div class="tabsone">
				<div class="da1" @click="activeName = 1"><div :style="{ borderBottom: activeName == 1 ? '3px solid #27ba9b' : '' }">商品详情</div></div>
				<div class="da1" @click="go2">
					<div :style="{ borderBottom: activeName == 2 ? '3px solid #27ba9b' : '' }">商品评价</div>
					<span style="color: red; margin-left: 5px">(0)</span>
				</div>
			</div>
			<!-- 商品详情 -->
			<div class="onenr" v-if="activeName == 1">
				<ul class="describe" v-if="details && details.properties">
					<li v-for="(item, index) in details.properties" :key="index">
						<span class="span">{{ item.name }}</span>
						<span class="span1">{{ item.value }}</span>
					</li>
				</ul>
				<div class="img" v-if="details && details.pictures">
					<img v-for="(item, index) in details.pictures" :key="index" :src="item" alt="" />
				</div>
			</div>
			<!-- 商品评价 -->
			<div class="a" v-if="activeName == 2">
				<GoodsComment :evaluatelist="evaluatelist" :evaluatelist2="evaluatelist2"></GoodsComment>
			</div>
		</div>
		<!-- 热销 -->
		<div class="rigth" v-if="hotlist1 && hotlist2">
			<GoodsHot :hotlist11="hotlist1" :hotlist22="hotlist2"></GoodsHot>
		</div>
	</div>
	<!-- padding: 20px 10px -->
</template>
<script>
import GoodsHot from "./GoodsHot.vue";
import GoodsComment from "./GoodsComment.vue";
export default {
	components: { GoodsHot, GoodsComment },
	props: ["details", "hotlist1", "hotlist2", "evaluatelist", "evaluatelist2"],
	data() {
		return {
			activeName: "1",
		};
	},
	methods: {
		go2() {
			this.activeName = 2;
			this.$emit("go2");
		},
	},
};
</script>
<style lang="scss" scoped>
.a {
	// padding-left: 25px !important;
}
.Goodsparticulars {
	width: 1240px;
	margin: auto;
	// background-color: white;
	display: flex;
	justify-content: space-between;
}
.tabs {
	width: 940px;
	background-color: white;
	.tabsone {
		width: 100%;
		height: 70px;
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		.da1 {
			width: 153px;
			height: 69px;
			background-color: rgb(255, 255, 255);
			border-right: 2px solid #f5f5f5;
			text-align: center;
			line-height: 69px;
			display: flex;
			justify-content: center;

			div {
				font-size: 18px;
				width: 102px;
				height: 100%;
				border-bottom: 3px solid transparent;
			}
		}
	}
	.onenr {
		width: 100%;
		padding-left: 25px;
		padding-top: 40px;
		.describe {
			width: 100%;
			min-height: 98px;
			display: flex;
			flex-wrap: wrap;
			li {
				width: 430px;
				background-color: #fff;
				height: 39px;
				font-size: 14px;
				display: flex;
				margin-bottom: 10px;
				.span {
					width: 100px;
					height: 100%;
					color: #ccc;
				}
				.span1 {
					flex: 1;
					color: #666;
				}
			}
		}
		.img {
			width: 100%;
			margin-left: 25px;
			margin-top: 30px;
			img {
				width: 860px;
				height: 229px;
				margin-top: -4px;
			}
			// background-color: red;
		}
	}
}
.rigth {
	width: 280px;
}
// .goods-item {
// 	background-color:white !important;
// }
</style>
